<template>
  <div class="box1">
    <div class="top000">
      <div class="bd0"></div>
      <h1>TOP250电影榜单</h1>
    </div>
    <div class="building">
      <el-row>
        <el-col
          :span="6"
          v-for="(filmid, index) in pageInfo"
          :key="index"
          :offset="1.1"
        >
          <el-card class="box-card">
            <div class="card-left">
              <img
                :src="filmid.picture"
                class="pic"
                @click="
                  filmdetail(
                    filmid.rank,
                    filmid.name,
                    filmid.score,
                    filmid.director,
                    filmid.type,
                    filmid.brief,
                    filmid.picture,
                    filmid.filmYear,
                    filmid.country
                  )
                "
              />
            </div>
          </el-card>
          <div class="card-right">
            <div class="rank">{{ filmid.rank }}</div>
            <div class="name">{{ filmid.name }}</div>
            <div class="score">{{ filmid.score }}</div>
            <div class="director">导演：{{ filmid.director }}</div>
            <div class="year">年份：{{ filmid.filmYear }}</div>
            <div class="country">国家：{{ filmid.country }}</div>
            <div class="type">类型：{{ filmid.type }}</div>
            <div class="brief">简介：{{ filmid.brief }}</div>
          </div>
          <!-- </div> -->
        </el-col>
      </el-row>
      <div class="bd0"></div>

      <div class="fenye">
        <el-pagination
          :background="true"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          layout="prev, pager, next, jumper"
          @size-change="handleSizeChange"
          :total="250"
          @current-change="handleCurrentChange"
        />
      </div>
      <div class="bd0"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageInfo: {},
      pageSize: 16,
      currentPage: 1,
    };
  },
  methods: {
    filmdetail(
      rank,
      name,
      score,
      director,
      type,
      brief,
      picture,
      filmYear,
      country
    ) {
      // window.location.href = e,'_blank'
      // window.open(e, "_blank");
      this.$router.push({
        path: "/games/twofivefilm",
        // params: { filmName }
        query: {
          rank: rank,
          name: name,
          score: score,
          director: director,
          type: type,
          brief: brief,
          picture: picture,
          filmYear: filmYear,
          country: country,
        },
      });
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getPageData(this.currentPage, this.pageSize);
      console.log("size", pageSize);
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum;
      this.getPageData(this.currentPage, this.pageSize);
      console.log("num", pageNum);
    },
    getPageData(num, size) {
      //得到分页数据
      this.$http
        .get("/top250/v1/film", { params: { pageNum: num, pageSize: size } })
        .then((response) => {
          this.pageInfo = response.data;
          this.tableData = this.pageInfo.list;
          console.log(response.data);
        });
    },
  },
  mounted() {
    this.getPageData(1, 16);
  },
};
</script>
<!-- 修改分页样式 -->
<style>
.el-pagination.is-background .el-pager li:not(.disabled) {
  background-color: rgb(255, 255, 255);
  color: rgb(5, 5, 5);
}
.el-pagination span {
  background: rgb(230, 230, 230);
  color: #0e0d0d;
  padding: 0 5px;
  line-height: 2;
  border-radius: 4px;
}
</style>
<style lang="scss" scoped>
.bd0 {
  height: 16px;
}
.top000 {
  height: 90px;
  width: 98%;
  margin-left: 10px;
  background-color: #577dee;
  border-radius: 10px;
  color: rgb(253, 248, 248);
  h1 {
    margin-left: 450px;
    font-size: 2.5em;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 10px;
    font-family: Lora, serif;
    font-weight: 200;
    &::before {
      content: "─";
      margin-right: 0.6em;
      color: #686868;
      color: #d8d8d8;
    }
    &::after {
      content: "─";
      margin-left: 0.6em;
      color: #686868;
      color: #d8d8d8;
    }
  }
}
.building {
  width: 98%;
  margin-left: 16px;
  margin-top: 10px;
  background-color: #fff;
  border-radius: 10px;
}
.box1 {
  /* background: url("/public/koubeibg.jpg");
  background-size: cover; */
  background-color: rgb(230, 229, 229);
  overflow: auto;
  width: 100%;
}
.fenye {
  margin-top: 16px;
  margin-left: 270px;
}
.none {
  height: 20px;
}
.rank {
  color: #577dee;
  font-weight: 600;
  font-size: 14px;
  position: absolute;
  margin-left: -30px;
  background-color: rgb(255, 254, 253);
  width: 30px;
  height: 30px;
  border-bottom-left-radius: 25px;
  text-align: center;
}
.pic {
  width: 90px;
  height: 150px;
  margin-left: -20px;
  margin-top: -50px;
}
.name {
  font-size: 14px;
  font-weight: 700;
  color: rgb(10, 10, 10);
}
.score {
  color: rgb(33, 50, 126);
  font-size: 14px;
  font-weight: 700;
  margin-top: -18px;
  float: right;
  margin-right: 20px;
}
.box-card {
  width: 90px;
  height: 130px;
  margin-top: 30px;
  margin-left: 20px;
}
.card-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 160px;
  width: 120px;
}
.card-right {
  color: rgb(155, 152, 152);
  margin-top: -130px;
  font-size: 8px;
  width: 150px;
  height: 136px;
  overflow-y: hidden;
  margin-left: 116px;
}
.director {
  margin-top: 4px;
  width: 130px;
}
.brief {
  width: 130px;
}
.item {
  margin-bottom: 18px;
}
</style>